<script type="text/javascript">
$(function() {
	$( "#fromDate" ).datepicker({ dateFormat: 'dd/mm/yy' });
	$( "#toDate" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
<?php 
	$products = $this->modelProducts->select_all();
	$orders = $this->modelOrders->select_all();	
?>
</script>

<div class="container_8 clearfix">                
	<!-- Main Section -->
	<section class="main-section grid_8">
		<!-- Forms Section -->
		<div class="main-content grid_8 alpha">
			<header>
				<h2>Thống kê website</h2>
			</header>
			<div class="grid_2" style="width: 100%;">
				<h3>Từ ngày<small> (mm/dd/yyyy)</small>
						<input id="fromDate" name="fromDate" type="text">
					Đến ngày<small> (mm/dd/yyyy)</small>
						<input id="toDate" name="toDate" type="text">
						<input class="button-gray" type="button" id="buttonFilter" ajaxify="<?php echo $this->url->action("index")?>" value="Lọc"/>
				</h3>
				<table class="simple full" style="width: 300px; float: left;">
					<tbody>
						<tr>
							<td>Số lượng sản phẩm:</td>
							<td class="ar" id="totalProduct"><?php echo count($products);?></td>
							<td><a onclick="showProduct();">Chi tiết</a></td>
						</tr>
						<tr>
							<td>Tổng đơn hàng:</td>
							<td class="ar" id="totalOrder"><?php echo count($orders);?></td>
							<td><a onclick="showOrder();">Chi tiết</a></td>
						</tr>
					</tbody>
				</table>
				<div id="dataProducts" style="width: 600px; float: right; margin: 20px 30px 30px 20px; display: none;">
					<h3>Danh mục chi tiết sản phẩm</h3>
					<table id="TablePaginate1" class="datatable tablesort selectable paginate full">
						<thead>
							<tr>
								<th style="width: 100px;">Mã sản phẩm</th>
								<th>Tên sản phẩm</th>
								<th style="width: 100px;">Giá</th>
							</tr>
						</thead>
						<tbody id="bodyProduct">
						<?php 
						foreach ($products as $product)
						{
						?>
							<tr>
								<td><?php echo $product['id']?></td>
								<td><?php echo $product['name']?></td>
								<td style="text-align: right;"><?php echo number_format($product['price'],0,",",".");?></td>
							</tr>
						<?php }?>
						</tbody>
					</table>
					<div id='pager1' class='pager1'>
						<li><a href='#' alt='Previous' class='prevPage button-blue'>Trước</a></li>
						<span class='listPages1'></span>
						<li><a href='#' alt='Next' class='nextPage button-blue'>Kế tiếp</a></li>
						<span class="button-blue" style='float:right; height: 20px; padding: 0 5px 0 5px;'>Đang xem <span class='currentPage'></span> của <span class='totalPages'></span></span>
					</div>
				</div>
				<div id="dataOrders" style="width: 600px; float: right; margin: 20px 30px 30px 20px; display: none;">
					<h3>Danh mục chi tiết đơn đặt hàng</h3>
					<table id="TablePaginate2" class="datatable tablesort selectable paginate full">
						<thead>
							<tr>
								<th>ID</th>
								<th>Họ tên</th>
								<th>Ngày đặt</th>
								<th>Chi tiết</th>
							</tr>
						</thead>
						<tbody id="bodyOrders">
						<?php 
						foreach ($orders as $order)
						{
						?>
							<tr>
								<td><?php echo $order['id']?></td>
								<td><?php echo $order['fullname']?></td>
								<td><?php echo XPHP_Date::isTheDay($order['date_create']);?></td>
								<td><a href="#" rel="<?php echo $this->url->action("detail","Orders", array($order['id']))?>" onclick="openDetail(this);">Xem</a></td>
							</tr>
						<?php
						} ?>	
						</tbody>
					</table>
					<div id='pager2' class='pager2'>
						<li><a href='#' alt='Previous' class='prevPage button-blue'>Trước</a></li>
						<span class='listPages2'></span>
						<li><a href='#' alt='Next' class='nextPage button-blue'>Kế tiếp</a></li>
						<span class="button-blue" style='float:right; height: 20px; padding: 0 5px 0 5px;'>Đang xem <span class='currentPage'></span> của <span class='totalPages'></span></span>
					</div>
				</div>
			</div>
		</div>
		<!-- End Forms Section -->
		<div class="clear"></div>
	</section>
    <!-- Main Section End -->
</div>

<script type="text/javascript">
$(document).ready(function(){
	$('#TablePaginate1').paginateTable({ rowsPerPage: 5, pager: ".pager1", listPages: '.listPages1' });
	$('#TablePaginate1').tablesort();
	$('#TablePaginate2').paginateTable({ rowsPerPage: 5 , pager: ".pager2", listPages: '.listPages2' });
	$('#TablePaginate2').tablesort();
	
	$("#buttonFilter").click(function()
	{
		data = {
			fromDate: $("#fromDate").val(),
			toDate: $("#toDate").val()
		};
		$.ajax({
			url: $(this).attr("ajaxify"),
			data: data,
			type: "POST",
			dataType: "json",
			success: function(response){
				if(response.success)
				{
					$("#totalProduct").html(response.data.product);
					$("#totalOrder").html(response.data.order);
					product = "";
					$.each(response.data.products, function(key, value){
						product += "<tr>";
						product += "<td>" + key + "</td>";
						product += "<td>" + value.name + "</td>";
						product += "<td>" + value.price + "</td>";
						product += "</tr>";
					});
					$("#bodyProduct").html(product);

					order = "";
					$.each(response.data.orders, function(key, value){
						order += "<tr>";
						order += "<td>" + key + "</td>";
						order += "<td>" + value.name + "</td>";
						order += "<td>" + value.date_create + "</td>";
						order += '<td><a rel="' + value.link + '" onclick="openDetail(this);">Xem</a></td>';
						order += "</tr>";
					});
					$("#bodyOrders").html(order);
				}
			}
		});
	});
});

function showProduct()
{
	$("#dataProducts").toggle();
}

function showOrder()
{
	$("#dataOrders").toggle();
}
function openDetail(ele)
{
	window.open($(ele).attr("rel"), "Chi tiết đơn hàng", "width=800, height=600");
}
</script>